.container {
  padding-top: 80px;
  header {
    // padding-top: 80px;
    // width:2000px;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #735ae7;
    box-shadow: 0 0 4px #9caeec;
    background-color: #fdfdfd;
    padding-top: 20px;
    box-sizing: border-box;
    ul {
      .search-left {
        width: 400px;
        height: 39px;
        line-height: 39px;
        box-shadow: 2px 2px 4px #9caeec;
        border-radius:  0 4px 4px 0 ;
        display: none;
      }
      li {
        a {
          float: left;
          padding: 0 30px;
          margin-right: 30px;
          height: 40px;
          line-height: 40px;
          border-radius: 25px;
          &:hover {
            background-color: #735ae7;
            color: #fff;
            transition: all .4s;
            box-shadow: 0 0 8px #9caeec
          }
        }
      }
    }
  } 

  .search {
    margin-top: 30px;
     height: 60px;
    //  border: 1px solid #eee;
     padding-top: 13px;
     box-sizing: border-box;
     .search-left {
       width: 400px;
       height: 39px;
       line-height: 39px;
       box-shadow: 2px 2px 4px #9caeec;
       border-radius:  0 4px 4px 0 ;
     }

     .login-right {
       width: 270px;

       ul {
         li{
           a {
             float: left;
             width: 80px;
             height: 35px;
             line-height: 35px;
             text-align: center;
             margin-left: 10px;
            //  box-shadow: 0 0 2px #9caeec
            border-radius: 5px;
             box-shadow: 2px 2px 4px #9caeec;
           }
         }
       }
     }
     
  }
  

  main {
    margin-top: 20px;
    height: 40px;
    line-height: 40px;
   
    ul { 
      box-shadow: 2px 2px 4px #9caeec;
      padding-left: 30px;      
      li {
        font-size: 14px;
        float: left;
        margin-right: 43px;
        a{
          img {
            margin-right: 4px;
            width: 18px ;
            height: 18px;
            vertical-align: sub;
          }
        }
      }
    }
  }
  
  .product {
    margin-top: 30px;
    display: flex;
    width: 1330px;
    .p-left {
      width: 340px;
      height: 1000px;
      // box-shadow: 0 0 8px #9caeec;
      margin-right: 20px;
  // border: 1px solid #9caeec;
      .fl-top {
        // padding-left: 15px;
        height: 300px;
        box-shadow: 0 0 8px #9caeec;
        // margin-top: 20px;
       h1 {
         width: 70%;
         margin-left: 10%;
         color: #735ae7;
         font-family:'Consolas';
         padding-top: 15px;
       }
       .line {
         height: 1px;
         background-color: #9caeec;
       }
       p {
         padding-left: 10%;
         color: #666;
         font-size: 16px;
         span {
           font-size: 18px;
           color: #735ae7;
           font-family: '造字工房悦圆演示版';
           margin-right: 5px;
          }
          &:last-child { 
          height: 40px;
          line-height: 38px;
          margin-left: 17%;
          color: #666;
          }
       }
      }
      .fl-top-two {
        height: 710px;
        box-shadow: 0 0 8px #9caeec;
        margin-top: 20px;
        padding-top: 8px;
        h1 {
          margin-left: 10%;
          color: #735ae7;
          font-family:'Consolas';
          padding-top: 13px;
          overflow: hidden;
          white-space: nowrap;
        }
        .line {
          height: 1px;
          background-color: #9caeec;
          margin-bottom: 15px;
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          padding-left: 15px;
          li {
            margin-top: 15px;
            // width: 33%;
            margin-left: 10px;
            margin-right: 10px;
            img {
              margin-right: 4px;
              width: 18px ;
              height: 18px;
              vertical-align: sub;
            }
          }
        }
      }
    }

    .p-content {
      height: 1000px;
      flex: 1;
      box-shadow: 0 0 8px #9caeec;
      margin-right: 20px;
      padding: 18px;

    }
    
    .p-right {
      width: 260px;
      height: 1030px;
      box-shadow: 0 0 8px #9caeec;
      padding-top: 3px;
      // padding-left: 8px;
      h1 {
        // width: 70
        margin-left: 10%;
        color: #735ae7;
        font-family:'Consolas';
        padding-top: 13px;
        overflow: hidden;
        white-space: nowrap;
      }
      .line {
        height: 1px;
        background-color: #9caeec;
        margin-bottom: 15px;
      }
      ul {
        padding-left: 10px;
        li {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top: 5px;
       
              img {
                margin-right: 4px;
                width: 18px ;
                height: 18px;
                vertical-align: sub;
              }
        }
      }
    }
  }
  
}


.header-show {
  background-color: #735ae7;
  color: #fff;
  box-shadow: 0 0 8px #9caeec
}


.input-search {
  width: 70%;
  border: none;
  outline: none;
  padding-left: 20px;
  font-size: 14px;
  font-family: 'Courier New';
 }
 .search-btn {
   width: 80px;
   height: 39px;
   background-color: #6e4fee;
   color: #fff;
   font-size: 18px;
   border-radius: 4px;
   float: right;
   border: none;
   outline: none;
   cursor: pointer;
 }

 .show-search {
   display: block;
 }